<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8"/>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Document</title>
		<script>!function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);</script>
		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/common.css" />
		<style type="text/css">
			canvas{
			    position: absolute;
			    top: 1.12rem;
			    left: 2.1rem;
			    width: 3.26rem;
			    height: 3.26rem;
			    border:1px solid #ccc;
			    /*width: 3rem;
			    height: 3rem;*/
			}
		</style>
	</head>
	<body>
		<canvas id="arc"></canvas>
		<script type="text/javascript">
			var rootFontSize = parseInt(getComputedStyle(window.document.documentElement)['font-size']);
			function Page(){}
			Page.prototype = {
				init:function(){
					var scope = this;
					scope.locationPosition(500);
				},
				strokeArc: function(start, end) {
				    start = Math.abs(start - 90) * Math.PI / 180;
				    end = Math.abs(end - 90) * Math.PI / 180;
				    var c = document.getElementById("arc");
				    var arcH = rootFontSize * 3.24 * 2;
				    c.setAttribute('height', arcH);
				    c.setAttribute('width', arcH);
				    var pointXY = arcH / 2;
				    var radius = pointXY-6;
				    console.log('pointXY', pointXY);
				    var ctx = c.getContext("2d");
				    ctx.lineWidth = 6;
				    ctx.strokeStyle = "#f00";
				    ctx.beginPath();
				    ctx.arc(pointXY, pointXY, radius, start, end);
				    // ctx.arc(75, 75, 75, 0, 2 * Math.PI);
				    ctx.stroke();
				},
				locationPosition: function(num) {
				    var scope = this;
				    // var $pen = $('#pen');
				    var initDeg = -60;
				    var duration = 500;
				    if (num > 180) {
				        num = 180;
				    }
				    if (num < 101) {
				        duration = 1000;
				    } else if (num < 151) {
				        duration = 1500;
				    } else {
				        duration = 1800;
				    }
				    // var speed = 2;
				    var offsetDeg = num / 150 * 180;

				    var sumNum = duration / 42; // 每42毫秒（人眼识别的最短时间）走2度需要多长时间 47.62次
				    var speed = offsetDeg / sumNum;
				    if (speed < 2) {
				        speed = 2;
				    }
				    // var perDeg = offsetDeg / 20; // 每100毫秒偏移的角度(2000/100)
				    // console.log('perDeg', perDeg);
				    // if (perDeg > speed) {
				    //     speed = perDeg;
				    // }
				    var realDeg = initDeg - offsetDeg;

				    var perOffestSum = 0;
				    var setAnimate = null;
				    //运动函数
				    var fun_animat = function() {
				        //运运的速度
				        perOffestSum += speed;
				        if (initDeg - perOffestSum < realDeg) {
				            clearInterval(setAnimate);
				            return;
				        }
				        //运动距离，即运动的弧度数;
				        var endDeg = initDeg - perOffestSum;
				        var ainhd = (initDeg - perOffestSum) * Math.PI / 180;
				        scope.strokeArc(initDeg, endDeg);
				        //按速度来定位DIV元素
				        // $pen.css({
				        //     left: (3.72 + 1.62 * Math.sin(ainhd)) + 'rem',
				        //     top: (2.76 + 1.62 * Math.cos(ainhd)) + 'rem'
				        // });
				    }
				    setAnimate = setInterval(fun_animat, 42);
				}
			}
			var page = new Page();
			page.init();
		</script>
	</body>
</html>